<template>
  <n-space vertical v-if="show">
    <n-card :bordered="false" style="width: 1400px;">
      <n-carousel :autoplay="3000" :height="720">
        <n-carousel-item v-for="item in items" :key="item.id">
          <img :src="item.image" alt="" style="width: 1400px; height: 720px;" />
          <div class="carousel-caption">
            <h3>{{ item.title }}</h3>
            <p>{{ item.text }}</p>
          </div>
        </n-carousel-item>
      </n-carousel>
    </n-card>
  </n-space>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import { NCard, NSpace, NCarousel, NCarouselItem } from 'naive-ui';
import {loadingBar} from "../HomeView_N.vue"

const show = ref(false);
const items = ref([
  {
    id: 1,
    image: '/user/rider ma.webp',
    title: '公约目的',
    text: '本协议旨在明确骑手与公司之间的权益和义务，规范双方之间的合作关系，以实现高效、安全、可靠的骑手配送服务。',
  },
  {
    id: 2,
    image: '/user/riderzheng.webp',
    title: '公约条款',
    text: '骑手需要满足以下条件才能开始配送服务:\n' +
        '年满 18周岁；\n' +
        '持有合法的身份证件;\n' +
        '拥有自行车或电动车，并拥有有效的证件，符合交通法规要求:\n' +
        '具备良好的身体条件和骑行能力:\n' +
        '注册并通过美团平台的审核\n' +
        '骑手有义务及时向公司提交最新的个人信息，包括但不限于身份证明联系方式等\n' +
        '公司有权根据业务需求和评估结果，决定是否为骑手提供配送服务的\n' +
        '骑手作为公司的代表，在配送过程中应严格遵守交通法规和道路安全规定。\n' +
        '骑手需保持良好的服务态度，注重服务质量，并保持外貌整洁、穿戴整齐。\n' +
        '骑手应按照客户订单要求，提供及时、准确的配送服务，确保订单的及时送达。\n' +
        '配送收益\n' +
        '骑手的配送收益由美团公司根据业务量和服务质量等因素进行结算\n' +
        '公司将根据骑手实际配送的订单数和完成率等指标，进行相应的奖励和优惠政策。\n' +
        '协议终止\n' +
        '骑手可以通过申请或自行注销的方式终止合作关系',

  },
  {
    id: 3,
    image: '/user/riderfeng.webp',
    title: '附则',
    text: '1.争议解决：本协议的生效、执行和解释均适用中华人民共和国法律。 '  +
            '2.协议变更：公司有权根据业务调整和政策变化，对本协议进行修订和调整，并提前通知骑手。'  +
            '3.协议生效：本协议自双方签署之日起生效，并在平台公示。' +
            '4.其他:\n' + '本协议未尽事宜或发生争议，双方应友好协商解决。若协商不成，任何一方均可向有管辖权的人民法院提起诉讼。\n'  +
            '以上就是骑手协议的具体内容，双方应严格遵守协议约定，共同维护骑手的权益和公司的业务顺利进行。'
  },
  // 可以添加更多轮播图项...
]);

onMounted(() => {
  loadingBar.finish();
  show.value = true;
})
</script>

<style scoped>
.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 1rem;
  display: flex;
  font-size: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
}
.text{

}
</style>